<template>
	<view class="">
		<view class="coupon">
			<view class="title">
				<text>{{title}}</text>
				<!-- <text class="spilit">|</text> -->
				<!-- <text class="fr">{{totalAmount}}</text> -->
			</view>
			<scroll-view scroll-x="true" class="coupon-content" enable-flex= true>
				<block v-if="couponList.length != 0" v-for="(item,index) in couponList" :key="index">
				  <!-- <view class="item" @tap="goDetail(item.id)"> -->
				  <view class="item">
					<view class="coupon_mark">{{item.couponMark}}</view>
					<!-- 满减 -->
					<view v-if="item.couponCondition == 1" class="info_box">
						
						<view class="amount">
							<view class="mark">¥</view>
							<view class="discount">{{item.cutAmount}}</view>
						</view>
						<view class="coupon_name">{{item.couponName}}</view>
					</view>
					
					<!-- 打折 -->
					<view v-if="item.couponCondition == 2" class="info_box">
						<view class="amount">
							<view class="discount">{{item.discount}}</view>
							<view class="mark">%</view>
						</view>
						<view class="coupon_name">{{item.couponName}}</view>
					</view>
					
					<view class="spilit">-------------</view>
					<button class="get_button" @click="acceptCoupon(item.id, item.couponCategoryId)">领取</button>
				  </view>
				</block>
				
				<view v-if="couponList.length == 0" class="empty" >
					暂无
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title: {
				type: String
			},
			couponList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			acceptCoupon(id, categoryId) {
				this.$emit("accept", id, categoryId);
			}
		}
	}
</script>

<style>
	.coupon {
		height: 360upx;
		width: 710upx;
		margin-top: 80upx;
		color: rgb(246, 254, 249);
		margin-left: 20upx;
		margin-right: 20upx;
	}
	
	.title {
		height: 80upx;
		width: 100%;
		background-color: rgb(255, 133, 14);
		line-height: 80upx;
		font-size: 40upx;
		vertical-align: middle;
		border-radius: 20upx 20upx 0 0;
	}
	
	.coupon-content {
	  white-space: nowrap; // 滚动必须加的属性
	  width: 670upx;
	  height: 260upx;
	  padding: 20upx;
	  color: black;
	  background-color: #ffffff;
	  border-radius: 0 0 20upx 20upx;
	  display: flex;
	}
	
	/* 暂无 */
	.empty {
		font-size: 100upx;
		color: rgb(255, 133, 14);
		/* text-align: center; */
		margin: auto auto;
		transform: translateY(-40upx);
	}
	
	.coupon-content .item {
		width: 250upx;
		height: 260upx;
		margin-right: 20upx;
		display: flex;
		vertical-align: top;
		color: black;
		background-color: rgb(243, 240, 199);	
		border-radius: 15upx;
		box-shadow: rgb(250, 233, 191);
		flex-direction: column;
	}
	
	.info_box {
		display: inline-block;
		margin: 0 auto;
		padding-top: 10upx;
		border-radius: 6upx;
		flex-grow: 2;
	}
	
	.coupon_mark {
		font-size: 30upx;
		color: rgb(255, 133, 14);
		position: absolute;
		top: 0;
	}
	
	.info_box .amount {
		color: rgb(247, 49, 38);
		text-align: center;
	}
	
	.info_box .coupon_name {
		text-align: center;
	}
	
	.amount .mark {
		display: inline;
		font-size: 50upx;
		font-weight: bold;
	}
	
	.amount .discount {
		display: inline;
		font-size: 80upx;
		font-weight: bold;
		margin-left: 8upx;
	}
	
	.item .spilit{
		color: red;
		font-size: 40upx;
		flex-grow: 1;
		text-align: center;
	}
	
	.item .get_button {
		/* display: block; // 让字体换行 */
		width: 60%;
		border-radius: 20upx;
		font-size: 30upx;
		line-height: 40upx;
		vertical-align: middle;
		flex-grow: 2;
		background-color: rgb(252, 54, 17);
		color: rgb(250, 234, 214);
	}
</style>